import React, { Component} from 'react'
import { Switch, Route, Redirect} from 'react-router-dom'
import { connect} from 'react-redux'
import cookie from 'js-cookie' //前台获取cookie  set()/get() /remove()
import { NavBar} from 'antd-mobile'

import { getRedirect} from '../../utils/tools'
import { updateList} from '../../redux/actions'

import Manito from '../manito-info/manito'
import Boxx from '../boxx-info/boxx'
import BoxxList from '../boxx/boxx'
import ManitoList from '../manito/manito'
import Personl from '../personl/personl'
import Message from '../message/message'
import Footer from '../../components/footer/footer'
import Chat from '../chat/chat'

class Main extends Component{


    /*
    此时这里有一个列表  大神列表  老板列表  消息列表  个人中心列表
     此时可以 使用的数组  或者对象 报把这些信息存起来  但是这里使用数组
        数据：[{ title (要显示的列表  根据路径来显示), text (要显示的文本),
                path: (请求的路径),icon: (显示的图标)，component：(内容)}]

 */

    navList = [
        //boxx
        {
            path: '/boxxlist',
            component: 'boxx',
            title: '大神列表',
            text: '老板',
            icon:'boxx',
        },
        //manito
        {
            path: '/manitolist',
            component: 'manito',
            title: '老板列表',
            text: '大神',
            icon:'manito',
        },
        //消息列表
        {
            path: '/message',
            component: 'message',
            title: '消息列表',
            text: '消息',
            icon:'message',
        },
        //消息列表
        {
            path: '/personals',
            component: 'personal',
            title: '个人中心',
            text: '个人中心',
            icon:'personal',
        }
    ]


    //此时在这里发送ajax请求  此时期 是在render第一次渲染之后调用
    componentDidMount(){
        this.props.updateList()
    }

    /*
        这里 如果有 cookie 当在浏览器直接请求'/路径的时候'  会直接渲染三次
        //第一次 是判断有没有 _d
        //第二次 发送请求拿去数据 判断要重定向的路由
        //第三次 此时渲染的组件是Main组件的子组件  此时渲染子组件 也要再次渲染自己
     */
    render(){
        const  { user, readCountMsgs}= this.props
      //这里实现一个自动登陆功能  即直接请求根路径('/')
        //  1 先判断 浏览器有没有cookie 如果没有 直接跳转到登陆页面  进行登陆 才能进入主页面
        const userid = cookie.get('userid')
        if (!userid){
            return <Redirect to='/login'/>
        }else{
            //2) 一旦没有_id 即发生ajax请求获取数据  但是此时  不做任何显示(也可以在此时显示loading)
            if (!user._id){
                 return null//此时这里可以做一个loading显示
             }else{
                //此时这里  有_id  要显示对应的 列表  老板 列表   或者 大神列表
                //但是此时应该访问的是'/'
                //这里获取请求路径
                let path = this.props.location.pathname
                //判断请求路径是否为'/'
                if (path === '/'){
                    //到达这里说明可以自动登陆 但是这里要根据  header  以及type返回一个 路径 即要显示的列表
                    const { header, type} = user
                    path = getRedirect(type, header)
                    console.log(path)
                    return <Redirect to={ path}/>
                }
            }
        }

        /*
            在这里要获取当前的路径  在匹配 navList有没有匹配的路径
            如果有就显示相应的列表  boxx列表  还是manito列表
            如果当前的路径
         */
        const { navList} = this
        const currentPath = this.props.location.pathname
        const currentNav = navList.find( nav => nav.path === currentPath)

        //底部的导航栏 应该根据类型显示不同的列表，要隐藏谁 为它添加一个属性  值为boolean(true)
        if (currentNav){
            if (user.type === 'boxx'){//此时应该显示的是老板的列表
                //此时应该隐藏navList的第二个值(大神)
                navList[1].flag = true
            } else {
                //此时隐藏第一个(老板)
                navList[0].flag = true
            }
        }

        return(
            //如果cuurentNav有值的话  就显示对应的 列表导航  底部同理  但是此时底部应该单独定义一个组件
             <div>
                 { currentNav ? <NavBar className='NavTop' >{ currentNav.title}</NavBar>: null}
                  <Switch>
                     <Route path='/boxx' component={ Boxx} />
                     <Route path='/manito' component={ Manito} />

                     <Route path='/boxxlist' component={ BoxxList} />
                     <Route path='/manitolist' component={ ManitoList} />
                     <Route path='/message' component={ Message }/>
                     <Route path='/personals' component={ Personl }/>

                     <Route path='/chat/:userid' component={ Chat }/>

                  </Switch>
                 { currentNav ? <Footer navList={navList} readCountMsgs={readCountMsgs} />: null}
             </div>
        )
    }
}

export default connect(
    state => ({ user: state.user, readCountMsgs: state.getMsgList.readCountMsgs}),
    { updateList}
)(Main)

/*
    这里实现一个自动登陆功能  即直接请求根路径(' /')
        1 先判断 浏览器有没有cookie 如果没有 直接跳转到登陆页面  进行登陆 才能进入主页面
        2 如果如果 有cookie 说明以前登陆过 则允许直接登陆
            1) 但是此时有两个问题 可能是新打开的页面 user 没有 _id
                (就是说此时服务器没有返回主页的相关数据)
            2) 一旦没有_id 即发生ajax请求获取数据  但是此时  不做任何显示(也可以在此时显示loading)
            3） 拿去数据之后  状态改变  再次执行render()  再次判断 有没有_id 如果有值
            4）如果有值 如果此时访问的是'/' 则根据header 以及 type 得到重定向的路径 执行重定向即可
 */